<template>
	<div class="main">
		<p class="title-p">我的</p>
		<div class="head">
			<div class="headIcon">
				<img :src="headIcon" alt="">
				<span>{{username}}</span>
			</div>
		</div>
		<div class="indent">
			<div class="text"><van-divider style="font-size: 1rem;color: #333;border-color: #999;">我的订单</van-divider></div>
			<div class="classify">
				<div><span class="iconfont icon-dianying" @click="gomymovie"></span><div>电影</div></div>
				<div><span class="iconfont icon-shangcheng"></span><div>商城</div></div>
			</div>
		</div>
		<div class="last">
			<div><span>优惠卷</span><span>&gt;</span></div>
			<div><span>折扣卡</span><span>&gt;</span></div>
			<div @click="goBack"><span>退出登录</span></div>
		</div>
	</div>
</template>



<script>
	import '@/assets/font/iconfont.css'
	import Vue from 'vue';
	import { Divider } from 'vant';
	
	Vue.use(Divider);
	
export default {
	data(){
		return{
			userInfo:{},
			headIcon:'',
			username:'',
		}
	},
	created() {
		console.log(1)
	},
	methods:{
		change(){
		},
		gomymovie(){
			this.$router.push('/mymovie')
		},
		goBack(){
			localStorage.removeItem('_token')
			this.$store.commit('common/setToken','')
			this.$router.push('/center/login')
		}
	},
	created() {
	    let _token = this.$store.state.common._token;
	    if (_token) {
	        this.$http.get("http://10.36.133.3:3000/api/v1/user/get").then((ret) => {
				console.log(ret)
	            if (ret.err == 0) {
	                // 赋值给初始可变数据
	                this.userInfo = ret.data;
					this.headIcon = ret.data.headIcon
					this.username = ret.data.userName
	            }
	        });
	    }
	},
}
</script>

<style scoped>
 .main{
     background-color: #f4f4f4;
}
 .title-p{
     width: 100%;
     font-size: 20px;
     color: white;
     text-align: center;
     margin: 0;
     padding: 0;
     position: absolute;
     top: 20px;
}
 .head{
     width: 100%;
     height: 200px;
     background-color: #f03d37;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .headIcon{
     width: 70px;
     height: 70px;
     border: 1px solid white;
     border-radius: 50%;
     padding: 2px;
     color: white;
     font-size: 16px;
     position: relative;
     top: 1px;
}
 .headIcon img{
     width: 70px;
     height: 70px;
     margin-bottom: 20px;
}
 .indent{
     width: 100%;
     background-color: #fff;
}
 .indent .text{
     position: relative;
     left: 50%;
     top: 10px;
     margin-left: -120px;
     width: 240px;
}
 .classify{
     width: 100%;
     display: flex;
     align-items: center;
     height: 100px;
}
 .classify>div{
     width:50%;
     text-align: center;
     font-size: 16px;
     color: #333;
}
 .classify span{
     font-size: 36px;
     color: red;
}
 .classify div:nth-of-type(2) span{
     color: #0086B3;
}
 .last{
     background-color: #fff;
     margin-top: 10px;
     margin-top: 20px;
}
 .last div{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 0 30px;
     font-size: 16px;
     border-bottom: 1px solid #EEEEEE;
     padding: 10px;
}
 
</style>